<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客编辑页</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/blogEdit.css">
    <link rel="stylesheet" href="layui-v2.8.0/layui/css/layui.css">
    <script src="js/app.js"></script>

    <script src="js/jquery.min.js"></script>
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>

    <style>
        .layui-row{
            width: 100%;
            height: 50px;
            background-color: rgba(255,255,255,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<!--导航栏-->
<div class="nav">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md7">
            <div class="grid-demo grid-demo-bg1">
                <div>
                    <img src="images/logo.png" alt="">
                    <span>个人博客系统</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <img src="images/user.png" alt="">
                <span id="user"></span>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="https://markdown.com.cn/basic-syntax/">
                    <img src="images/editor.png" alt="">
                    <span>markdown</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="blogList.html">
                    <img src="images/collect.png" alt="">
                    <span>博客列表</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="blogEdit.html">
                    <img src="images/write.png" alt="">
                    <span>笔耕不辍</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="logout">
                    <img src="images/logout.png" alt="">
                    <span>退出登录</span>
                </a>
            </div>
        </div>
    </div>
</div>

<!--编辑器容器-->
<div class="edit-container">
    <form action="blog" method="post" style="height: 100%">
        <div class="title">
            <input type="text" id="title" name="title" placeholder=" 请输入文章标题">
            <input id="submit" type="submit" value="发布博客">
        </div>

        <div id="editor">
            <textarea name="content" style="display: none"></textarea>
        </div>
    </form>
</div>

<script>
    var editor = editormd("editor", {
        // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
        width: "100%",
        // 设定编辑器高度
        height: "calc(100% - 50px)",
        // 编辑器中的初始内容
        markdown: "# 在这里写下一篇博客",
        // 指定 editor.md 依赖的插件路径
        path: "editor.md/lib/",
        saveHTMLToTextarea: true
    });

    // function checkLogin() {
    //     $.ajax({
    //         type: 'get',
    //         url: 'login',
    //         success: function(body) {
    //             if (body.userId && body.userId > 0) {
    //                 // 登录成功!!
    //                 console.log("当前用户已经登录!!");
    //             } else {
    //                 // 当前未登录
    //                 // 强制跳转到登录页.
    //                 location.assign('login.html');
    //             }
    //         }
    //     });
    // }
    // checkLogin();

    getLoginStatus();
    // 获取当前用户的登录信息
    function userInfo(){
        $.ajax({
            type: 'get',
            url: 'userInfo',
            success: function (body){
                // 获取成功就是user对象,将user对象添加到页面上
                let user = document.querySelector('#user');
                user.innerHTML = body.username;
            }
        });
    }
    userInfo();
</script>
</body>
</html>